import React, { Component } from "react";
import {
  NavBar,
  Icon,
  Card,
  WingBlank,
  WhiteSpace,
  List,
  ListView
} from "antd-mobile";

import './read.less'

const data = [
  {
    img: require('../../assets/imgs/book-1.jpg'),
    title: "4321",
    author:'作者：[美] 保罗·奥斯特',
    category:'小说 / 美国文学',
    date:'2018-10-12',
    des: "有没有哪个瞬间，我们发现了自己另外四分之三的人生？"
  },
  {
    img: require('../../assets/imgs/book-2.jpg'),
    title: "拍电影时我在想的事",
    author:'作者：[日]是枝裕和',
    date:'2018-10-12',
    category:'电影 / 随笔',
    des: "他在思考的事情，决定了其电影的样子。"
  },
  {
    img:require('../../assets/imgs/book-3.jpg'),
    title: "冬泳",
    author:'作者：班宇',
    date:'2018-10-12',
    category:'东北 / 短篇小说',
    des: "水里其实是要比岸上暖和的，所以这些人物没有试图上岸。"
  },
  {
    img:require('../../assets/imgs/book-4.jpg'),
    title: "非平面",
    date:'2018-10-12',
    author:'作者：[美] 尼克·索萨尼斯',
    category:'漫画 / 艺术',
    des: "一部没有任何故事的漫画书，为我们往后该如何观察世界提供了思路，同时也拓展了我所理解的漫画的边界。"
  }
];

const NUM_ROWS = 20;
let pageIndex = 0;

function genData(pIndex = 0) {
  const dataBlob = {};
  for (let i = 0; i < NUM_ROWS; i++) {
    const ii = (pIndex * NUM_ROWS) + i;
    dataBlob[`${ii}`] = `row - ${ii}`;
  }
  return dataBlob;
}









class Read extends React.Component {
  constructor(props) {
    super(props);
    const dataSource = new ListView.DataSource({
      rowHasChanged: (row1, row2) => row1 !== row2,
    });

    this.state = {
      dataSource,
      isLoading: true,
    };
  }

  componentDidMount() {
    // you can scroll to the specified position
    // setTimeout(() => this.lv.scrollTo(0, 120), 800);

    // simulate initial Ajax
    setTimeout(() => {
      this.rData = genData();
      this.setState({
        dataSource: this.state.dataSource.cloneWithRows(this.rData),
        isLoading: false,
      });
    }, 600);
  }

  // If you use redux, the data maybe at props, you need use `componentWillReceiveProps`
  // componentWillReceiveProps(nextProps) {
  //   if (nextProps.dataSource !== this.props.dataSource) {
  //     this.setState({
  //       dataSource: this.state.dataSource.cloneWithRows(nextProps.dataSource),
  //     });
  //   }
  // }

  onEndReached = (event) => {
    // load new data
    // hasMore: from backend data, indicates whether it is the last page, here is false
    if (this.state.isLoading && !this.state.hasMore) {
      return;
    }
    console.log('reach end', event);
    this.setState({ isLoading: true });
    setTimeout(() => {
      this.rData = { ...this.rData, ...genData(++pageIndex) };
      this.setState({
        dataSource: this.state.dataSource.cloneWithRows(this.rData),
        isLoading: false,
      });
    }, 1000);
  }

  render() {
    const separator = (sectionID, rowID) => (
      <div
        key={`${sectionID}-${rowID}`}
        style={{
          backgroundColor: '#F5F5F9',
          height: 8,
          borderTop: '1px solid #ECECED',
          borderBottom: '1px solid #ECECED',
        }}
      />
    );
    let index = data.length - 1;
    const row = (rowData, sectionID, rowID) => {
      if (index < 0) {
        index = data.length - 1;
      }
      const obj = data[index--];
      return (
        <a key={rowID} className="reading-card">
          <div className="cover">
            <img src={obj.img} alt={obj.title} className="img-show"/>
          </div>
          <div className="info">
            <h3>{obj.title}</h3>
            <p className="meta">{obj.author} <span>{obj.date}</span></p>
            <p className="category">{obj.category}</p>
            {/* <p className="desc">{obj.des}</p> */}
          </div>
        </a>
      );
    };
    return (
      <ListView
        ref={el => this.lv = el}
        dataSource={this.state.dataSource}
        renderFooter={() => (<div style={{ padding: 30, textAlign: 'center' }}>
          {this.state.isLoading ? 'Loading...' : 'Loaded'}
        </div>)}
        renderRow={row}
        renderSeparator={separator}
        className="am-list"
        pageSize={4}
        useBodyScroll
        onScroll={() => { console.log('scroll'); }}
        scrollRenderAheadDistance={500}
        onEndReached={this.onEndReached}
        onEndReachedThreshold={10}
      />
    );
  }
}

export default Read;
